<!--
*- coding = utf-8 -*-
#@Time : 2025-11-01 20:32
#@Author : 管茂良
#@File : index.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
    <view class="add-record-page">
        <CustomNavbar
                title="添加记账"
                :showBack="true"
                title-color="#333"
                nav-bg-color="#fff"
        />

        <view class="form-container">
            <!-- 收支类型选择 -->
            <view class="type-selector">
                <view
                        class="type-item"
                        :class="{ active: selectedType === 'income' }"
                        @click="selectedType = 'income'"
                >
                    <text class="type-icon">➕</text>
                    <text class="type-text">收入</text>
                </view>
                <view
                        class="type-item"
                        :class="{ active: selectedType === 'expense' }"
                        @click="selectedType = 'expense'"
                >
                    <text class="type-icon">➖</text>
                    <text class="type-text">支出</text>
                </view>
            </view>

            <!-- 金额输入 -->
            <view class="amount-input">
                <text class="amount-label">金额 (元)</text>
                <input
                        v-model.number="amount"
                        class="amount-input-box"
                        type="number"
                        placeholder="请输入金额"
                        keyboard-type="decimal-pad"
                />
            </view>

            <!-- 备注输入 -->
            <view class="note-input">
                <text class="note-label">备注</text>
                <input
                        v-model="note"
                        class="note-input-box"
                        type="text"
                        placeholder="例如：午餐、工资"
                />
            </view>

            <!-- 分类选择（简化版） -->
            <view class="category-selector">
                <text class="category-label">分类</text>
                <view class="category-list">
                    <view
                            class="category-item"
                            v-for="(item, index) in categories"
                            :key="index"
                            @click="selectedCategory = item"
                            :class="{ active: selectedCategory === item }"
                    >
                        <text class="category-icon">{{ item.icon }}</text>
                        <text class="category-text">{{ item.name }}</text>
                    </view>
                </view>
            </view>

            <!-- 提交按钮 -->
            <button class="submit-btn" @click="handleSubmit" :disabled="!isFormValid">
                保存记录
            </button>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { ref, computed } from 'vue';
    import CustomNavbar from '@/components/CustomNavbar.vue';

    // 收支类型
    const selectedType = ref<'income' | 'expense'>('expense');
    // 金额
    const amount = ref<number>(0);
    // 备注
    const note = ref<string>('');
    // 分类列表
    const categories = ref([
        { name: '餐饮', icon: '🍜' },
        { name: '交通', icon: '🚌' },
        { name: '购物', icon: '🛒' },
        { name: '薪资', icon: '💼' },
        { name: '娱乐', icon: '🎮' },
        { name: '其他', icon: '🔧' }
    ]);
    // 选中分类
    const selectedCategory = ref(categories.value[0]);

    // 表单验证
    const isFormValid = computed(() => {
        return amount.value > 0 && note.value.trim() !== '';
    });

    // 提交记录
    const handleSubmit = () => {
        // 构造记录数据
        const newRecord = {
            id: Date.now(),
            name: note.value.trim(),
            type: selectedType.value,
            amount: amount.value,
            time: new Date().toISOString().slice(0, 16).replace('T', ' '),
            icon: selectedCategory.value.icon,
            category: selectedCategory.value.name
        };

        // 模拟保存（实际项目中应调用接口或本地存储）
        uni.showToast({ title: '记录保存成功' });

        // 返回上一页并刷新
        setTimeout(() => {
            uni.navigateBack({ delta: 1 });
        }, 1500);
    };
</script>

<style lang="less" scoped>
    .add-record-page {
        background-color: #f8f9fa;
        min-height: 100vh;
    }

    .form-container {
        padding: 16px;
    }

    // 收支类型选择
    .type-selector {
        display: flex;
        gap: 16px;
        margin-bottom: 24px;

        .type-item {
            flex: 1;
            text-align: center;
            padding: 12px 0;
            border-radius: 12px;
            background-color: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            cursor: pointer;

            .type-icon {
                font-size: 24px;
                display: block;
                margin-bottom: 4px;
            }

            .type-text {
                font-size: 16px;
                color: #333;
            }

            &.active {
                background-color: #1890ff;
                color: #fff;

                .type-text {
                    color: #fff;
                }
            }
        }
    }

    // 金额输入
    .amount-input, .note-input {
        margin-bottom: 20px;

        .amount-label, .note-label {
            font-size: 14px;
            color: #8c8c8c;
            display: block;
            margin-bottom: 8px;
        }

        .amount-input-box, .note-input-box {
            width: 100%;
            padding: 12px 16px;
            background-color: #fff;
            border-radius: 12px;
            font-size: 16px;
            color: #333;
            box-sizing: border-box;
        }

        .amount-input-box {
            font-size: 20px;
        }
    }

    // 分类选择
    .category-selector {
        margin-bottom: 30px;

        .category-label {
            font-size: 14px;
            color: #8c8c8c;
            display: block;
            margin-bottom: 12px;
        }

        .category-list {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 60px;
            padding: 12px 0;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
            cursor: pointer;

            .category-icon {
                font-size: 20px;
                margin-bottom: 4px;
            }

            .category-text {
                font-size: 12px;
                color: #333;
            }

            &.active {
                border: 2px solid #1890ff;
            }
        }
    }

    // 提交按钮
    .submit-btn {
        width: 100%;
        height: 48px;
        background-color: #1890ff;
        color: #fff;
        border-radius: 24px;
        font-size: 16px;

        &::after {
            border: none;
            border-radius: 24px;
        }

        &:disabled {
            background-color: #e8f4ff;
            color: #8cc5ff;
        }
    }

    // 深色模式
    @media (prefers-color-scheme: dark) {
        .add-record-page {
            background-color: #1a1a1a;
        }

        .type-item, .amount-input-box, .note-input-box, .category-item {
            background-color: #2c2c2c;
            color: #f5f5f5;
        }

        .type-text, .category-text {
            color: #f5f5f5;
        }

        .amount-label, .note-label, .category-label {
            color: #b3b3b3;
        }
    }
</style>
